<template>
  <div class="virtual-select_wrapper">
      <div class="virtual-select" @click="fn.handleClick">
        <label> 文字部分 </label>
        <span class="button-arrow-down">
          <i class="fa fa-angle-double-down"></i>
        </span>
      </div>
      <div class="virtual-select-dropdown">

        <div class="virtual-select-item" v-show="state.show" v-for="item in 5">

        </div>
      </div>
  </div>
</template>

<script>
import {computed, defineComponent, reactive, watch, watchEffect} from "vue"

export default defineComponent({
  name: 'virtual-select',
  setup() {
    const state = reactive({
      viewList:[],
      list:[],
      show:false,
    })

    const viewCountItem = computed(()=>{ state.viewList.length })
    const scrollPosition = computed(()=>(viewCountItem/state.list.length*100).toFixed(2))

    const fn = {
      handleClick(){
        state.show = !state.show
      }
    }

    return {
      state,
      fn
    }
  },
})
</script>

<style lang='scss' scoped>
.virtual-select_wrapper {
  position: relative;
  background-color: #fff;
  width: 120px;
  .virtual-select{
    width: 100%;
  }
  .virtual-select-dropdown{
    width: 100%;
    position: absolute;
    .virtual-select-item{
      height: 40px;
      width: 100%;
      background-color: #eee;
      box-sizing: border-box;
      transition: all .2s;
      border:{
        bottom-style: solid ;
        color: gray;
        width: 1px;
      }
      &:hover{
        background-color: #ccc;
      }
    }
  }
}
</style>
